<template>
  <div id="app">
    <div :class="navFixed ? 'Fixed' : 'navtop'">
      <a-card class="card-header">
        <a-form-model :model="model">
          <a-row :gutter="24" type="flex" justify="end">
            <a-col :span="12">
              <div class="equipState">
                <div
                  class="equipItem"
                  v-for="(item, index) in equipList"
                  :key="index"
                >
                  <div class="title">
                    <span :style="{ color: item.color }" class="titleSpan"
                      >|</span
                    >{{ item.equipName }}
                  </div>
                  <div class="number">{{ item.number }}</div>
                </div>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="operate">
                <div class="operation">
                  <a-form-model-item
                    label="设备编号"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input
                      v-model.trim="rs"
                      placeholder="SN码/设备编号"
                    ></a-input>
                  </a-form-model-item>
                  <a-button type="primary" @click="toTarget(rs)">搜索</a-button>
                  <!-- <a-button type="primary" @click="handleShow">{{
                    isShow ? "完成" : "编辑"
                  }}</a-button> -->
                </div>
                <div class="pusBtn">
                  <a-button type="primary" @click="handleAdd"
                    >添加设备</a-button
                  >
                  <a-button type="primary" @click="handleLine"
                    >添加分组</a-button
                  >
                  <a-button type="primary" @click="handleDele"
                    >删除设备</a-button
                  >
                  <a-button type="primary" @click="handleDeleLin"
                    >删除分组</a-button
                  >
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
    </div>
    <table-select-modal
      ref="selectForm"
      :replaceFields="departReplace"
      :columns="equipmentModel.columns"
      :name="equipmentModel.name"
      :mode="'checkbox'"
      :del="true"
      @ok="handeleOK"
      :tableKey="equipmentModel.tableKey"
      :deletekey="equipmentModel.deletekey"
    ></table-select-modal>
    <listSequence
      :list="list"
      :isShow="isShow"
      @ok="handeleOK"
      @handEdit="handEdit"
      ref="listForm"
    />
    <EquipMentModal
      ref="modalForm"
      :Option="Option"
      @ok="handeleOK"
      @cancel="handeleCancel"
    ></EquipMentModal>
    <ProductLineModal ref="modalLine" @ok="handeleOK" />
    <DeleModal
      ref="lineDel"
      :replaceFields="departReplace"
      :columns="linModel.columns"
      :name="linModel.name"
      :code="linModel.code"
      :del="true"
      @ok="handeleOK"
      :tableKey="linModel.tableKey"
    ></DeleModal>
  </div>
</template>

<script>
import {
  equipmentModel,
  linModel,
} from "@/pages/EquipmentMonitor/components/tableConfig";
import api from "@/api/apiServer";
import TableSelectModal from "@/components/TableSelectModal";
import DeleModal from "./components/DeleModal.vue";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";
import EquipMentModal from "./components/EquipMentModal.vue";
import listSequence from "./components/listSequence/index.vue";
import ProductLineModal from "./components/ProductLineModal.vue";
export default {
  components: {
    TableSelectModal,
    listSequence,
    EquipMentModal,
    tableMinxins,
    ProductLineModal,
    DeleModal,
  },
  data() {
    return {
      model: {},
      rs: "",
      dom: [],
      Option: [],
      treeData: [],
      isShow: false,
      queryParam: {
        deleteFlag: "N",
      },
      labelCol: {
        xl: { span: 8 },
        xxl: { span: 8 },
      },
      wrapperCol: {
        xl: { span: 16 },
        xxl: { span: 16 },
      },
      list: [],
      productLineId: null,
      treeData: [],
      equipList: [
        { color: "#3293dc", equipName: "设备总数", number: 0 },
        { color: "#2fcc7b", equipName: "在线设备", number: 0 },
        { color: "#ecc46e", equipName: "待机设备", number: 0 },
        { color: "#fc7f5e", equipName: "报警设备", number: 0 },
        { color: "#a5a6ac", equipName: "离线设备", number: 0 },
      ],
      navFixed: false,
      equipmentModel,
      linModel,
      departReplace: {
        children: "childList",
        title: "departmentName",
        key: "id",
        value: "id",
      },
    };
  },
  activated() {
    this.getOption();
  },
  created() {
    this.getOption();
    this.getList();
    // this.getTypeList();
    // this.times();
  },
  mounted() {
    this.$nextTick(function() {
      document.querySelector("#app").addEventListener("scroll", this.onScroll);
    });
    window.addEventListener("scroll", this.watchScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.watchScroll);
    clearInterval(this.times);
  },
  methods: {
    // 获取产线数据源
    async getOption() {
      const params = { pageNumber: 1, pageSize: 999999 };
      const res = await api.ProductLinePage(params);
      // this.treeData = setTreeData(res.data.data, "custom", "equipmentTypeList");
      this.Option = res.data.data;
      this.Option.push({
        id: -1,
        name: "未分组",
      });
      this.Option.push({
        id: -2,
        name: "报废组",
      });
    },
    // 获取列表数据
    async getList() {
      const res = await api.ProductLineMonitor({ id: this.productLineId });
      this.list = res.data;
      const equipNumber = this.fliterEquip(this.list);
      this.$set(this.equipList[0], "number", equipNumber);
      this.$set(this.equipList[1], "number", this.fliterEquip(this.list, 1000));
      this.$set(this.equipList[2], "number", this.fliterEquip(this.list, 3000));
      this.$set(this.equipList[3], "number", this.fliterEquip(this.list, 2000));
      this.$set(this.equipList[4], "number", this.fliterEquip(this.list, 4000));
    },
    handleChange(value) {
      this.productLineId = value;
    },
    handleAllList() {
      delete this.productLineId;
      this.getList();
    },
    // 查询
    handleSearch() {
      this.getList();
    },
    // 新增
    handleAdd() {
      // this.disabled = false;
      this.$refs.modalForm.title = "新增设备";
      this.$refs.modalForm.modalAdd();
    },
    handEdit(item) {
      this.disabled = true;
      this.$refs.modalForm.title = "编辑设备";
      this.$refs.modalForm.modalEdit(item);
      localStorage.setItem('curEditMacSn', item.macSn)
    },
    handleLine() {
      this.disabled = false;
      this.$refs.modalLine.title = "新增";
      this.$refs.modalLine.modalAdd();
    },
    modalType() {
      this.getList();
      // this.getTypeList();
    },
    //编辑
    handleShow() {
      this.isShow = !this.isShow;
    },
    handeleOK() {
      this.getList();

      setTimeout(() => {
        var target = localStorage.getItem('curEditMacSn')
        if(target) {
          this.toTarget(target)
        }
        // this.targetFor(target).forEach((item) => {
        //   const toElement = document.querySelector(`.equ${item}`);
        //   toElement.style.border = "none";
        // });
      }, 300)
    },
    handeleCancel() {
      this.handeleOK()
    },
    //搜索框搜索跳转
    toTarget(target) {
      if (target) {
        const scrollElement = document.querySelector(
          `.equ${this.targetFor(target)[0]}`
        );
        scrollElement.scrollIntoView({
          behavior: "smooth",
          block: "center",
          inline: "end",
        });
        if (this.dom.length > 0) {
          this.dom.forEach((val) => {
            val.style.border = "1px none #2399f1";
          });
        }
        this.targetFor(target).forEach((item) => {
          const toElement = document.querySelector(`.equ${item}`);
          toElement.style.border = "2px solid #2399f1";
          this.dom.push(toElement);
        });
      }
    },
    targetFor(str) {
      let id = [];
      this.list.forEach((item) => {
        item.data.map((val) => {
          if (val.equipmentNumber.includes(str)) {
            return id.push(val.id);
          } else if (val.macSn.includes(str)) {
            return id.push(val.id);
          }
        });
      });
      return id;
    },
    //
    fliterEquip(arr, number) {
      let sum = 0;
      let onlinesum = 0;
      let police = 0;
      let opportune = 0;
      let offline = 0;
      if (number == 1000) {
        arr.forEach((item) => {
          let online = item.data.filter((val) => {
            return val.status == number;
          });
          onlinesum += online.length;
        });
        return onlinesum;
      } else if (number == 2000) {
        arr.forEach((item) => {
          let online = item.data.filter((val) => {
            return val.status == number;
          });
          police += online.length;
        });
        return police;
      } else if (number == 3000) {
        arr.forEach((item) => {
          let online = item.data.filter((val) => {
            return val.status == number;
          });
          opportune += online.length;
        });
        return opportune;
      } else if (number == 4000) {
        arr.forEach((item) => {
          let online = item.data.filter((val) => {
            return val.status == number || val.status == null;
          });
          offline += online.length;
        });
        return offline;
      } else {
        arr.forEach((item) => {
          sum += item.data.length;
        });
        return sum;
      }
    },
    times() {
      //定义了一个times()方法来执行定时查询findDB()
      return setInterval(() => {
        //setInterval换个名字就行了
        this.getOption();
        this.getList();
        // this.getTypeList();
      }, 10000); //设置时间，这里是10s
    },
    handleOk() {
      this.getOption();
      this.getList();
      this.isShow = false;
    },
    handlesucc() {
      this.getOption();
      this.getList();
    },
    //删除
    handleDele() {
      this.$refs.selectForm.title = "删除设备";
      this.$refs.selectForm.modalAdd();
      // this.$refs["listForm"].addDel();
    },
    handleDeleLin() {
      this.$refs.lineDel.title = "删除产线";
      this.$refs.lineDel.modalAdd();
    },
    //滚动条事件
    watchScroll() {
      //滚动距离
      var scrollTop = window.scrollY;
      if (scrollTop > 300) {
        this.navFixed = true;
      } else if (scrollTop < 300) {
        this.navFixed = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.Fixed {
  position: fixed;
  width: 87%;
  top: 50px;
  z-index: 2;
  overflow: overlay;
}
.card-header {
  margin: 20px 0;
  .equipState {
    display: flex;
    background: #f6f8fa;
    border-radius: 4px;
    padding: 10px 20px;
    .equipItem {
      width: 150px;
      border-right: 1px solid #e7eaef;
      padding-left: 10px;
      .title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #7d8ca5;
        line-height: 20px;
        .titleSpan {
          font-size: 20px;
          font-weight: bold;
        }
      }
      .number {
        font-size: 30px;
        font-family: DINPro;
        font-weight: bold;
        color: #182e50;
        line-height: 40px;
        margin-left: 20px;
      }
    }
  }
  .operate {
    display: flex;
    background: #f6f8fa;
    border-radius: 4px;
    padding: 14px 38px;
    // align-items: center;
    .operation {
      display: flex;
      align-items: center;
      border-right: 1px solid #e7eaef;
      button {
        margin: 10px 5px;
      }
    }
    .pusBtn {
      display: flex;
      align-items: center;
      button {
        margin: 10px 5px;
      }
    }
  }
}
::v-deep .ant-tree-node-content-wrapper {
  width: 90%;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>
